<template>
  <div style="width:180px;">
      <div class="wrap" style="width: 100%;
    position: relative;">
            <div class="left-bar" style="width: 2px;
    height: 60px;
    background-color: #00704E;
    position: absolute;"></div>
            <div class="title" style="color: #fff;
    margin-left: 10px;
    margin-bottom: 11px;
    font-size: 14px;">天气预警</div>
            <div class="content" style="margin-left: 10px;
    color: #00704E;
    font-size: 14px;">
                <div class="time" style="display: flex;
    justify-content: space-between;
    align-items: center;">
                    <div>08:18</div>
                    <div style="flex: 1;
    margin-left: 4px;
    margin-right: 4px;
    height: 0px;
    border-bottom: 1px dashed #00704E;"></div>
                    <div style="color: #fff;">16:00</div>
                </div>
                <div class="place" style="display: flex;
    justify-content: space-between;
    align-items: center;margin-top: 8px;font-size: 12px;
">
                    <div style="transform:scale(.8);transform-origin:left;white-space:nowrap;">影响变电站:鸟巢1号</div>
                    <div style="color: #fff;transform:scale(.8);transform-origin:left;white-space:nowrap;margin-left:-11px;">影响线路:鸟巢1号</div>
                </div>
                <div class="bar" style="display: flex;
    justify-content: space-between;
    align-items: center;">
                    <div style="margin-top: 5px;
    height: 8px;
    border-radius: 4px;
    background-color: #00704e;width: 51%;"></div>
                    <div style="margin-top: 5px;
    height: 8px;
    border-radius: 4px;
    background-color: #00704e;width: 45%;
    background-color: #00CC84;"></div>
                </div>
                <div class="gradient" style="width:100%;
    height: 37px;
    background: linear-gradient(90deg, rgba(0, 204, 132, 0.39) 62%, rgba(0, 204, 132, 0) 100%);
    opacity: .6;
    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;">
                    <img src="../assets/21.png" alt="">
                </div>
            </div>
      </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>
/* 
.wrap{
    width: 100%;
    position: relative;
}
.left-bar{
    width: 2px;
    height: 60px;
    background-color: #00704E;
    position: absolute;
}
.title{
    color: #fff;
    margin-left: 10px;
    margin-bottom: 17px;
    font-size: 14px;
}
.content{
    margin-left: 10px;
    color: #00704E;
    font-size: 14px;
}
.time,.place,.bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.time > div:nth-child(2){
    flex: 1;
    margin-left: 4px;
    margin-right: 4px;
    height: 0px;
    border-bottom: 1px dashed #00704E;
}
.time > div:nth-child(3){
    color: #fff;
}
.place{
    margin-top: 8px;
}
.place > div{
    font-size: 12px;
}
.place > div:nth-child(2){
    color: #fff;
}
.bar div{
    margin-top: 5px;
    height: 8px;
    border-radius: 4px;
    background-color: #00704e;
}
.bar div:nth-child(1){
    width: 51%;
}
.bar div:nth-child(2){
    width: 45%;
    background-color: #00CC84;
}
.gradient{
    width:100%;
    height: 37px;
    background: linear-gradient(90deg, rgba(0, 204, 132, 0.39) 62%, rgba(0, 204, 132, 0) 100%);
    opacity: .6;
    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
} */
</style>